{sm_shop_template 'common/header'}
<link rel="stylesheet" href="/addons/sm_shop_plugin_diy/admin/assets/css/diy.css">
<!--<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>-->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>-->

<div id="container">
    <file-manager
            v-on:express="fileManagerExpress"
            :visible.sync="fileManagerVisible"></file-manager>
    {sm_shop_plugin_diy_template 'common/nav'}
    <div id="content">

        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <button class="btn btn-primary"
                            v-on:click="save()"
                            data-original-title="保存">
                        <i class="fa fa-save"></i>
                    </button>
                    <!--<button type="button" id="save-variant" title="" class="btn btn-success" >
                        <i class="fa fa-save"></i>
                    </button>-->
                    <a v-bind:href="url_pre + '&r=diy.page_list'" title=""
                       class="btn btn-default">
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
                <h1>页面装修</h1>
                <ul class="breadcrumb">
                    <li>首页</li>
                    <li>页面装修</li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">

            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-pencil"></i> 页面装修</h3>
                </div>

                <div class="panel-body">

                    <div class="module-mobile">
                        <div class="mobile">
                            <div class="header">
                                <h3 class="title">自定义装修</h3>
                            </div>
                            <div class="body">

                                <div v-for="(blk,index) in block"
                                     v-bind:class="{'active':current_block == blk }"
                                     class="layout image ">

                                    <div class="handle">
                                        <div v-on:click.stop="block_delete( )" class="handle-item rubbish">
                                            <i class="el-icon-delete"></i>
                                        </div>
                                        <div v-on:click.stop="block_copy( )"  class="handle-item copy">
                                            <i class="el-icon-document-copy"></i>
                                        </div>
                                        <div v-on:click.stop="block_up( )"  class="handle-item up">
                                            <i class="el-icon-arrow-up"></i>
                                        </div>
                                        <div v-on:click.stop="block_down( )"  class="handle-item down">
                                            <i class="el-icon-arrow-down"></i>
                                        </div>
                                    </div>
                                    <div class="field">

                                        <div class="rubik " v-bind:class="blk.layout.split('.')[1]">
<!--
                                            <template v-if="blk.layout=='image.' + image_index "
                                                    v-for="image_item,image_index in layout_dict.image" >
                                                <template v-for="cube_item,cube_index in image_item.cube">
                                                    <div  :class="['cube ',image_index, cube_index,
                                                     blk==current_block &&
                                                     'image.' + image_index== current_layout &&
                                                     cube_index == current_cube ? 'active' : '' ]"
                                                          v-on:click="edit_cube( 'image.'+ image_index, cube_index )">
                                                        <span>{{cube_item.placeholder}}</span>
                                                        <img v-if="cube_item.image" v-bind:src="cube_item.image" alt="">
                                                    </div>
                                                </template>

                                            </template>-->
                                            <template v-for="cube_item,cube_index in blk.cubes">
                                                <div  :class="['cube',blk.layout.split('.')[1], cube_index,
                                                     blk==current_block &&
                                                     blk.layout== current_layout &&
                                                     cube_index == current_cube ? 'active' : '' ]"
                                                      v-on:click="edit_cube( blk, cube_index )">
                                                    <span>{{cube_item.placeholder}}</span>
                                                    <img v-if="cube_item.image"
                                                         :style="{width:'calc(100% - '+ blk.cube_space+'px)',height:'calc(100% - '+ blk.cube_space+'px)'}"
                                                         v-bind:src="cube_item.image" alt="">
                                                </div>
                                            </template>

                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="edit-panel">
                        <div class="all-components">
                            <el-form ref="form"  label-width="80px">
                                <el-form-item label="页面标题">
                                    <el-input v-model="page_title"></el-input>
                                </el-form-item>
                                <el-form-item label="添加布局">

                                    <el-button v-on:click="create_block('image.one')"
                                               v-bind:class="{'active':layout.indexOf('image.')>=0}" >
                                        图片布局
                                    </el-button>
                                    <el-button>其他布局</el-button>

                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="panel">

                            <div v-show="current_block.layout && current_block.layout.indexOf('image.')>-1"
                                 class="panel-item layout-image">

                                <div class="type-group">
                                    <div class="type" v-for="item,index in layout_dict.image"
                                         v-bind:class="{'active':current_block.layout=='image.'+ index }"
                                         v-on:click="select_layout('image.' + index )"
                                    >
                                        <img :src="'../addons/sm_shop_plugin_diy/admin/assets/image/'+ item.background" alt="">
                                        <div class="name">{{item.name}}</div>
                                    </div>
                                </div>

                                <div class="type-edit">

                                    <el-row v-if="current_block && current_cube">
                                        <el-col :span="24">
                                            <el-form>
                                                <el-form-item label="图片间隙" label-width="80px">
                                                    <el-input-number v-model="current_block.cube_space" :min="0" :max="10" label="描述文字"></el-input-number>
                                                </el-form-item>
                                                <el-form-item label="图片上传" label-width="80px">
                                                    <el-button @click="open_file_manager()">上传</el-button>
                                                </el-form-item>
                                                <el-form-item label="链接" label-width="80px">
                                                    <el-row :gutter="10">
                                                        <el-col :span="6">
                                                            <el-select v-model="current_block.cubes[current_cube].page_link"
                                                                       @change="select_link"
                                                                       clearable placeholder="请选择">
                                                                <el-option
                                                                        v-for="item in link_dict"
                                                                        :key="item.key"
                                                                        :label="item.title"
                                                                        :value="item.key">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                        <el-col :span="6" v-for="param,key in selected_link.params">
                                                            <el-input @input="select_link_param( param )"
                                                                      v-model="param.value"
                                                                      :placeholder="param.title" ></el-input>

                                                        </el-col>
                                                        <!--<el-col :span="6" v-for="param,key in current_block.cubes[current_cube].link_params">
                                                            {{param}}111 {{key}}
                                                            <el-input v-model="current_block.cubes[current_cube].link_params[key]"
                                                            ></el-input>
                                                        </el-col>-->
                                                    </el-row>


                                                </el-form-item>
                                            </el-form>
                                        </el-col>
                                    </el-row>

                                </div>


                            </div>

                            <div class="panel-item module-product">


                            </div>


                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
{sm_shop_template 'common/footer'}

<script>
    var diy = new Vue({
        el: '#container',
        name: "diy_edit",
        data: function () {

            return {

                diy_id:0,
                url_pre: '{php echo $this->url_pre;}',
                page_title:'',
                block: [],
                current_block: {
                    layout  : '',
                    cubes    : {},
                },
                current_layout: '',
                current_cube: '',
                layout: '',
                layout_dict:{
                    image:{
                        one:{
                            name:'1张图',
                            background:'rubik-0.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:750,
                                    height:360,
                                    placeholder:'宽度为750 * 360',
                                }
                            }
                        },
                        'two-fifth':{
                            name:'2张图',
                            background:'rubik-1.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:360,
                                    height:360,
                                    placeholder:'300 * 360',
                                },
                                b:{
                                    image:'',
                                    width:450,
                                    height:360,
                                    placeholder:'450 * 360',
                                }
                            }
                        },
                        'three-fifth':{
                            name:'3张图',
                            background:'rubik-2.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:300,
                                    height:360,
                                    placeholder:'300 * 360',
                                },
                                b:{
                                    image:'',
                                    width:450,
                                    height:180,
                                    placeholder:'450 * 180',
                                },
                                c:{
                                    image:'',
                                    width:450,
                                    height:180,
                                    placeholder:'450 * 180',
                                }
                            }
                        },
                        'four-fifth':{
                            name:'4张图',
                            background:'rubik-3.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:300,
                                    height:360,
                                    placeholder:'300 * 360',
                                },
                                b:{
                                    image:'',
                                    width:450,
                                    height:180,
                                    placeholder:'450 * 180',
                                },
                                c:{
                                    image:'',
                                    width:225,
                                    height:90,
                                    placeholder:'225 * 90',
                                },
                                d:{
                                    image:'',
                                    width:225,
                                    height:90,
                                    placeholder:'225 * 90',
                                }
                            }
                        },
                        half:{
                            name:'2张图平分',
                            background:'rubik-4.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:375,
                                    height:240,
                                    placeholder:'375 * 240',
                                },
                                b:{
                                    image:'',
                                    width:375,
                                    height:240,
                                    placeholder:'375 * 240',
                                }
                            }
                        },
                        third:{
                            name:'3张图平分',
                            background:'rubik-5.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:375,
                                    height:240,
                                    placeholder:'375 * 240',
                                },
                                b:{
                                    image:'',
                                    width:375,
                                    height:240,
                                    placeholder:'375 * 240',
                                },
                                c:{
                                    image:'',
                                    width:375,
                                    height:240,
                                    placeholder:'375 * 240',
                                }
                            }
                        },
                        forth:{
                            name:'4张图平分',
                            background:'rubik-6.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:188,
                                    height:188,
                                    placeholder:'188 * 188',
                                },
                                b:{
                                    image:'',
                                    width:188,
                                    height:188,
                                    placeholder:'188 * 188',
                                },
                                c:{
                                    image:'',
                                    width:188,
                                    height:188,
                                    placeholder:'188 * 188',
                                },
                                d:{
                                    image:'',
                                    width:188,
                                    height:188,
                                    placeholder:'188 * 188',
                                }
                            }
                        },
                        'half-half':{
                            name:'田字平分',
                            background:'rubik-7.png',
                            cube:{
                                a:{
                                    image:'',
                                    width:375,
                                    height:186,
                                    placeholder:'375 * 186',
                                },
                                b:{
                                    image:'',
                                    width:375,
                                    height:186,
                                    placeholder:'375 * 186',
                                },
                                c:{
                                    image:'',
                                    width:375,
                                    height:186,
                                    placeholder:'375 * 186',
                                },
                                d:{
                                    image:'',
                                    width:375,
                                    height:186,
                                    placeholder:'375 * 186',
                                }
                            }
                        },
                        free:{
                            name:'自定义',
                            background:'rubik-8.png',
                            cube:{ }
                        }
                    }
                },
                link_dict:{
                    home:{
                        title:'首页',
                        key:'home',
                    },
                    cart:{
                        title:'购物车',
                        key:'cart',
                    },
                    category:{
                        title:'分类页面',
                        key:'category',
                        params:{
                            brand_id:{
                                title:'品牌ID',
                                key:'brand_id',
                                value:''
                            },
                            category_id:{
                                title:'分类ID',
                                key:'category_id',
                                value:''
                            }
                        }
                    },
                    product:{
                        title:'商品详情',
                        key:'product',
                        params:{
                            product_id:{
                                title:'商品ID',
                                key:'product_id',
                                value:''
                            }
                        },
                    },
                    customer:{
                        title:'用户中心',
                        key:'customer',
                    },
                    order:{
                        title:'订单列表',
                        key:'order',
                    }
                },
                fileManagerVisible:false,
                file_manager:{
                    visible:false
                },
                selected_image:'',
                selected_link:{}
            }

        },

        methods: {

            single:function(){

                var t = this;
                var url = this.url_pre + '&r=diy.single';
                url += '&diy_id=' + this.diy_id;
                axios.get( url ).then(function( res ){

                    t.page_title = res.data.diy.title ;
                    var diy = JSON.parse( res.data.diy.diy );
                    if(Array.isArray( diy )){
                        t.block = diy;
                    }

                });
            },
            select_block: function (block) {

                this.current_block = block;

            },

            select_layout: function (layout) {
                if( layout == 'image.free'){
                    alert('正在施工中...,请选择其他布局');
                    return;
                }
                this.current_block.layout = layout;
                this.current_cube = '';
                var style = layout.split('.')[0];
                var type = layout.split('.')[1];
                if( type ){
                    var cube_json = JSON.stringify( this.layout_dict[style][type].cube );
                    this.current_block.cubes = JSON.parse( cube_json );
                }
            },

            create_block: function (layout) {

                this.layout = layout;
                this.current_cube = '';
                var cubes = '';
                var style = layout.split('.')[0];
                var type = layout.split('.')[1];
                if( type ){
                    var cube_json = JSON.stringify( this.layout_dict[style][type].cube );
                    cubes = JSON.parse( cube_json );
                }

                for(var p in cubes ){
                    cubes[p].page_link = '';
                }
                var block = {
                    layout: layout,
                    cubes:cubes,
                    cube_space:0,
                };
                this.current_block = block;
                this.block.push(block);

            },
            edit_cube: function ( blk, cube ) {

                this.current_block = blk;
                this.current_layout = blk.layout;
                this.current_cube = cube;

                if( this.current_block.cubes[ this.current_cube ] && this.current_block.cubes[ this.current_cube ].page_link ){
                    // this.select_link( this.current_block.cubes[ this.current_cube ].page_link );
                }else{

                }
                this.select_link( this.current_block.cubes[ this.current_cube ].page_link );
                console.log( this.current_block );

            },
            open_file_manager:function (  ) {

                this.fileManagerVisible = true;
                // this.file_manager.visible = true;

            },

            fileManagerExpress:function( data ){

                // console.log('express');
                this.fileManagerVisible = data.visible;
                if( data.image ){
                    var path = '/attachment/' + data.image.path;
                    this.current_block.cubes[this.current_cube].image = path;
                    console.log( 'fileManagerExpress:' );
                    console.log( this.current_block );
                    // this.$set( this.current_block.cubes[this.current_cube], 'image', path );
                }
            },

            block_delete:function(){

                var index = this.block.indexOf(this.current_block);
                this.block.splice( index, 1 );

            },

            block_copy:function(){
                var index = this.block.indexOf(this.current_block);
                var layout = this.current_block.layout;
                var cubes_json = JSON.stringify( this.current_block.cubes );


                var cubes = JSON.parse( cubes_json );
                console.log( cubes_json );
                console.log( cubes );

                var new_block = {
                    layout: layout,
                    cubes:cubes
                };

                this.block.splice( index, 0, new_block );
            },

            block_up:function(){
                var index = this.block.indexOf(this.current_block);
                if( index ){
                    var block = this.block.splice(index, 1);
                    // console.log( 'block_up:' );
                    // console.log( block );
                    this.block.splice(index-1, 0, block[0]);
                }
            },

            block_down:function(){
                var index = this.block.indexOf(this.current_block);
                if( index < this.block.length-1 ){
                    var block = this.block.splice(index, 1);
                    this.block.splice(index+1, 0, block[0]);
                }
            },

            save:function () {

                var t = this;
                var url = this.url_pre + '&r=diy.edit';
                if( this.diy_id ){

                    url += '&diy_id=' + this.diy_id;
                }
                if( this.page_title.replace(/^(\s+)|(\s+)$/g,'').length==0 ){
                    alert('页面标题不能为空');
                    return;
                }
                var data = {
                    title: this.page_title,
                    diy: JSON.stringify( this.block ),
                };
                axios.post( url, data ).then(function( res ){

                    if( res.data.status ){
                        alert( res.data.description );
                        return;
                    }

                    location.href = t.url_pre + '&r=diy.page_list';

                });

            },

            select_link:function( key ){

                console.log( key );
                if( !key ){
                    this.selected_link = '';
                }else{
                    this.selected_link = this.link_dict[key];
                }
                if( !this.current_block.cubes[this.current_cube].link_params ){
                    this.current_block.cubes[this.current_cube].link_params = {};
                }
                if( this.selected_link.params ){
                    for( var p in this.selected_link.params ){
                        // this.current_block.cubes[this.current_cube].link_params[p] = 'a';
                        // this.$set(this.current_block.cubes[this.current_cube].link_params, p, '');
                        var val = '';
                        if( this.current_block.cubes[this.current_cube].link_params[p] ){
                            val = this.current_block.cubes[this.current_cube].link_params[p];
                        }else{
                            this.current_block.cubes[this.current_cube].link_params[p]='';
                        }
                        this.selected_link.params[p].value = val;
                    }
                }
                console.log( this.selected_link );
                // this.$set( this.selected_link, 'params', this.selected_link.params );
            },
            select_link_param:function( param ){
                console.log( param );
                if( !this.current_block.cubes[this.current_cube].link_params ){
                    this.current_block.cubes[this.current_cube].link_params = {};
                }
                this.current_block.cubes[this.current_cube].link_params[param.key] = param.value;
                console.log( this.current_block.cubes[this.current_cube] );
            }

        },

        created: function () {

            var diy_id = getQueryString('diy_id');
            if( diy_id ){

                this.diy_id = diy_id;
                //todo 获取 diy 数据
                this.single();
            }
        }

    });
</script>